<template>
	<view id="app" v-show="getDataStatus">
		<view class="list" v-if="listData.length != 0">
			<view class="list-item" v-for="(item,index) in listData" :key="item.submit_id">
				<view class="list-status">
					<view class="">
						{{item.out_trade_no}}
					</view>
					<view class="">
						<mp-html :content="item.ispay" />
					</view>
				</view>
				<view class="list-hr"></view>
				<view class="list-userInfo">
					姓名：{{item.submit_name}}
				</view>
				<view class="list-userInfo">
					金额：￥{{item.project_money}}
				</view>
				<view class="list-userInfo">
					联系电话：{{item.submit_phone}}
				</view>
				<view class="list-userInfo">
					区域：{{item.project_name}}
				</view>
			</view>
			<uni-load-more :contentText="contentText" :status="loadingStatus"></uni-load-more>
		</view>
		<view class="no-list" v-else>
			<view class="no-list-text">
				{{noListMsg}}
			</view>
		</view>
	</view>
</template>
<style lang="less">
page{
	background-color: #EDEDED;
}
#app{
	width: 750rpx;
	.list{
		padding: 20rpx 4%;
		.list-item{
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			&:not(:last-of-type){
				margin-bottom: 20rpx;	
			}
			.list-status{
				display: flex;
				justify-content: space-between;
			}
			.list-hr{
				border-bottom: 1rpx solid #000000;
				margin: 10rpx 0;
			}
		}	
	}
	.no-list{
		width: 750rpx;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.no-list-text{
			font-size: 40rpx;
			font-weight: bold;
		}
	}	
}
</style>
<script>
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		// HBuilderX 2.5.5+ 可以通过 easycom 自动引入
		components: {
		  mpHtml
		},
		data() {
			return {
				contentText: {
					contentdown: '上滑查看更多数据',
					contentrefresh: '加载中......',
					contentnomore: '没有更多了'
				},				
				wx_openid:'',
				listData:[],
				loadingStatus:'more',
				search:{
					page:1,
					limit:4
				},
				total:0,
				getDataStatus:false,
				noListMsg:''
			}
		},
		onShow() {
			//重新从其他页面点过来，恢复原来值
			this.remveData()
			if(this.wx_openid == ''){
				this.getWxUser()	
			}else{
				this.getMyDetails()
			}
		},
		methods: {
			//恢复默认值
			remveData(){
				this.total = 0
				this.search.page = 1
				this.listData = []
				this.loadingStatus = 'more'
				this.getDataStatus = false
			},
			//下拉刷新
			onPullDownRefresh(){
				//恢复原来值
				this.remveData()
				//重新请求
				this.getMyDetails()
			},
			//触到底部触发
			onReachBottom(){
				this.loadingStatus = 'loading'
				console.log(this.search.page)
				setTimeout(()=>{
					if(this.total<this.search.page * this.search.limit){
						this.loadingStatus = 'no-more'
						 return
					}
					this.search.page++					
					this.getMyDetails()
				},1000)
			},
			getWxUser(){
				wx.login({
				  success: (res) =>{
				    if (res.code) {
				      //发起网络请求
				      uni.request({
				        url: this.$url + '/applet/index/setOpenid',
						method:'get',
				        data: {
				          code: res.code
				        },
						success:(new_res)=>{
							this.wx_openid = new_res.data.wxs_openid
							this.getMyDetails()
						},
				      })
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
			},
			getMyDetails(){
				uni.request({
					url:this.$url + '/index/myDetails',
					method:'POST',
					data:{'wx_openid':this.wx_openid,page:this.search.page,limit:this.search.limit},
					success: (res) => {
						let data = res.data
						if(data.status == 200){
							if(data.data != ''){
								this.listData = [...this.listData,...data.data]
								this.total = data.total							
							}
							//没有数据的显示内容，默认“暂无数据”
							this.noListMsg = data.noListMsg	
							this.getDataStatus = true
							//关闭下拉重新加载动画
							uni.stopPullDownRefresh()
						}
					}
				})
			}
		}
	}
</script>


